<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>#{get 'title' /}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="@{'/public/stylesheets/bootstrap.css'}" rel="stylesheet">
	#{get 'moreStyles' /}

    <style type="text/css">
body {
	padding-top: 60px;
	padding-bottom: 40px;
}

.sidebar-nav {
	padding: 9px 0;
}

.cursor-pointer {
	cursor: pointer;
}

.td-icon {
	width: 100px;
}

.td-details {
	width: 400px;
}

#add-item td {
	background-color: white;
}

#add-item td {
	background-color: white;
}

[class ^="icon-"],[class *=" icon-"] {
	background-image: url("@{'/public/images/glyphicons-halflings.png'}");
}

.div_hidden {
	display: none !important;
}

.div_show {
}

#store_div {
	background-color: rgb(253, 253, 253);
}



/* For input sizes, make them display block */
.docs-input-sizes img,
.docs-input-sizes select,
.docs-input-sizes input {
  display: block;
  margin-bottom: 9px;
}
</style>
    
    <link href="@{'/public/stylesheets/bootstrap-responsive.css'}" rel="stylesheet">

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="@{'/public/images/favicon.png'}">
  </head>

  <body>

    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
        <div class="row">
        	<div class="offset3 span6">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="#">Indoor Delivery</a>
          <div class="btn-group pull-right">
            <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
              <i class="icon-user"></i> ${session.userName}
              <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
              <li><a href="@{Secure.logout()}">Sign Out</a></li>
            </ul>
          </div>
          <div class="nav-collapse">
            <ul class="nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#about">About</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
        </div>
        </div>
      </div>
    </div>

		#{doLayout /}
      <!-- hr>

      <footer>
        <p>&copy; Company 2012</p>
      </footer-->

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="@{'/public/javascripts/jquery-1.7.2.js'}"></script>
    <script src="@{'/public/javascripts/bootstrap-transition.js'}"></script>
    <script src="@{'/public/javascripts/bootstrap-alert.js'}"></script>
    <script src="@{'/public/javascripts/bootstrap-modal.js'}"></script>
    <script src="@{'/public/javascripts/bootstrap-dropdown.js'}"></script>
    <script src="@{'/public/javascripts/bootstrap-scrollspy.js'}"></script>
    <script src="@{'/public/javascripts/bootstrap-tab.js'}"></script>
    <script src="@{'/public/javascripts/bootstrap-tooltip.js'}"></script>
    <script src="@{'/public/javascripts/bootstrap-popover.js'}"></script>
    <script src="@{'/public/javascripts/bootstrap-button.js'}"></script>
    <script src="@{'/public/javascripts/bootstrap-collapse.js'}"></script>
    <script src="@{'/public/javascripts/bootstrap-carousel.js'}"></script>
    <script src="@{'/public/javascripts/bootstrap-typeahead.js'}"></script>
    <script src="@{'/public/javascripts/jquery.form.js'}"></script>
    <script src="@{'/public/javascripts/scripts.js'}"></script>
	
	#{get 'moreScripts' /}
  </body>
</html>
